<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>马呀马的博客</title>
  </head>
  <body>
    <header>最近拖延症严重呀！</header>
    <main>
      <h1>HTML重点标签</h1>
      <section>
        <h2>a标签</h2>
        <p>a标签共有四种属性：href、target、download和rel=noopener</p>
        <ol>
          <li>
            href取值
            <ul>
              <li>
                网址：1)https://qq.com; 2)http://qq.com; 3)//qq.com
                （建议使用第三种，效果更好）
              </li>
              <li>路径：1）/a/b/c; 2)a/b/c; 3)index.html; 4)./index.html。</li>
              <li>伪协议：1）javascript：代码；；<p><code javascript> a href="javascript:;">空伪协议 </a> </code></p>
                  2）邮箱、手机号</li>
              <li>id</li>
            </ul>
            <li>
              target取值
              <ul>
                <li>内置名字：_block,_top, _parent和_self。</li>
                <li>程序员命名：1）Windows的name；2）iframe的name。</li>
              </ul>
            </li>
            <li>
              download：部分浏览器不支持
            </li>
          </li>
        </ol>
      </section>
      <section>
        <h2>iframe标签</h2>
        <p>用于内嵌窗口</p>
      </section>
      <section>
          <h2>table标签</h2>
          <table>
            <thead>
              <tr>
                <th></th>
                <th>XiaoHong</th>
                <th>XiaoMing</th>
                <th>XiaoQiang</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>Math</th>
                <td>61</td>
                <td>85</td>
                <td>91</td>
              </tr>
              <tr>
                <th>Chinese</th>
                <td>81</td>
                <td>65</td>
                <td>81</td>
              </tr>
              <tr>
                <th>English</th>
                <td>73</td>
                <td>92</td>
                <td>67</td>
              </tr>
            </tbody>
          </table>
          <ul>
              <li>格式：thead、tbody和tfoot</li>
              <li>命令：
                  <ul>
                      <li>tr：行</li>
                      <li>th：表头</li>
                      <li>td：数据</li>
                  </ul>
              </li>
              <li>相关样式：table-layout、border-collapse和border-space。</li>
          </ul>
      </section>
      <section>
          <h2>img标签</h2>
          <ol>
              <li>
                <strong>作用：发出get请求，展示一张图片</strong>         
              </li>
              <li>属性：alt、height、width和src。alt可在图片加载失败时展示一段文字
              </li>
              <li>
                事件：onload（成功加载）、onerror（加载失败）
              </li>
              <li>响应式：max-width：100%</li>
              <li>
                  <strong>可替换元素</strong>
              </li>
              <li>举例：
                  <p>
                      <code>
                        <img id="xxx" width=450px src="2.jpg" alt="海贼王图片" />
                        <script>
                          xxx.onload = function () {
                            console.log("Success in loading image");
                          };
                          xxx.onerror = function () {
                            console.log("Failed to load image");
                            xxx.src = "404.png";
                          };
                        </script>
                      </code>
                  </p>
              </li>
          </ol>
      </section>
    </main>
  </body>
</html>
